<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8">
    <title>Cyxmall首页</title>
    <link rel="stylesheet" href="css/mall.css">
    <link rel="stylesheet" href="css/detail.css">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script src="layui/layui.js"></script>
    <script src="js/mall.js"></script>
    <script src="js/detail.js"></script>
    <script src="js/logout.js"></script>
    <link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<!--head start-->
    <div id="header" class="layui-bg-gray">
        <div class="header-content layui-container">
            <div class="logo">
              <a href="/static/index.html"><img src="images/logo.ico" alt=""></a>
            </div>
            <div class="search">
                <input type="text" name="search" id="inputKeywords" placeholder="请输入您想要的宝贝">
                <button type="submit" class="btn layui-btn layui-btn-radius layui-btn-warm"> 搜&emsp;索 </button>
                <ul class="search_item"></ul>
            </div>
            <div class="nav">
                <ul class="layui-nav">
                    <li class="layui-nav-item">
                        <a href="">购物车<span class="layui-badge">9</span></a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="">个人中心<span class="layui-badge-dot"></span></a>
                    </li>
                    <li class="layui-nav-item" id="user-info">
                        <a href=""><img src="" class="layui-nav-img" id="portrait_t"><span id="nickname"></span></a>
                        <dl class="layui-nav-child">
                          <dd><a href="/static/user.html">修改信息</a></dd>
                          <dd><a href="javascript:;">安全管理</a></dd>
                          <dd><a href="javascript:logout()">退出</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
    </div>
<!-- header end -->

<!-- main start -->
<main id="main">
    <div class="layui-container">
        <!--商品信息 start-->
        <div class="product-info">
            <!--商品图片 start-->
            <div class="infoimg" id="infoimg">
                <div class="mainImg" id="largePicDiv">
                    <img id="largePic" src="" alt="宝贝">
                    <div class="zoom_pup" id="move"></div>
                    <div id="detailPic" class="big_pic">
                        <img src="" alt="宝贝">
                    </div>
                </div>
                <div class="allImg" id="allImg">
                    <img src="" alt="宝贝">
                </div>
            </div>
            <!--商品图片 end-->
            <!--商品选项 start-->
            <div class="product-option">
                <h2 id="product-title"></h2>
                <h3 id="product-subtitle"></h3>
                <div class="product-meta">
                    <span class="product-name">价格</span>
                    <em class="product-price">¥ 2788.00-3888.00</em>
                </div>
                <ul class="option-item" id="option-item">
                  <!--
                    <li>
                        <span class="product-name">颜色分类</span>
                        <ul class="options">
                            <li>
                                <img src="https://img.alicdn.com/imgextra/i2/3913958620/O1CN01fePqPr2DY0mXk9gNi_!!3913958620.jpg_430x430q90.jpg" title="皇室蓝0-12岁">
                                <img src="https://img.alicdn.com/imgextra/i1/3913958620/O1CN01AZSn7U2DY0mbeyquh_!!3913958620.jpg_430x430q90.jpg" title="热情红0-12岁">
                                <img src="https://img.alicdn.com/imgextra/i4/3913958620/O1CN014OWpSH2DY0mY0gtQt_!!3913958620.jpg_430x430q90.jpg" title="玫瑰粉0-12岁">
                                <img src="https://img.alicdn.com/imgextra/i2/3913958620/O1CN01fePqPr2DY0mXk9gNi_!!3913958620.jpg_430x430q90.jpg" title="皇室蓝0-7岁">
                                <img src="https://img.alicdn.com/imgextra/i1/3913958620/O1CN01AZSn7U2DY0mbeyquh_!!3913958620.jpg_430x430q90.jpg" title="热情红0-7岁">
                                <img src="https://img.alicdn.com/imgextra/i4/3913958620/O1CN014OWpSH2DY0mY0gtQt_!!3913958620.jpg_430x430q90.jpg" title="玫瑰粉0-7岁">
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span class="product-name">版本号</span>
                        <ul class="options">
                            <li>V10</li>
                            <li>V20</li>
                        </ul>
                    </li>
                  -->
                </ul>
                <div class="product-num">
                    <span class="product-name">数量</span>
                    <span>
                        <input type="number" value="1" class="by-num">件（库存<span class="inventory">12</span>件）
                    </span>
                </div>
                <div class="product-btn">
                    <button class="layui-btn layui-btn-warm shopping-btn">立即购物</button>
                    <button class="layui-btn layui-btn-danger shopping-car-btn">
                        <i class="layui-icon layui-icon-cart"></i>
                        加入购物车
                    </button>
                </div>
            </div>
            <!--商品选项 end-->
        </div>
        <!--商品信息 end-->
        <!--商品详情 start-->
        <div class="product-detail">
            <div class="layui-tab layui-tab-card"><!--复制选项卡--卡片风格的Tab-->
                <ul class="layui-tab-title">
                    <li class="layui-this">宝贝详情</li>
                    <li>评论</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="detail-img" id="detail-img">
                            <img src="" alt="宝贝">
                        </div>
                    </div>
                    <div class="layui-tab-item">2</div>
                </div>
            </div>
        </div>
        <!--商品详情 end-->
    </div>
</main>
<!-- main end -->
<!-- footer start -->
    <div id="foot">
        <div class="foot1-content layui-container">
            <span class="layui-breadcrumb" lay-separator="|">
              <a href="">我的商城</a>
              <a href="">天猫商城</a>
              <a href="">聚划算</a>
              <a href="">全球通卖通</a>
              <a href="">国际交易市场</a>
              <a href="">商城游戏</a>
              <a href="">小铺子</a>
              <a href="">淘宝网</a>
              <a href="">京东商城</a>
              <a href="">高德地图</a>
            </span>
            <hr class="layui-border-orange">
            <span class="layui-breadcrumb" lay-separator="|">
              <a href="">关于商城</a>
              <a href="">营销中心</a>
              <a href="">联系客服</a>
              <a href="">法律声明</a>
              <a href="">联系我</a><i class="layui-icon layui-icon-login-wechat"></i>
            </span>
        </div>
        <hr>
        <div class="foot2-content layui-container">
            <span>版权声明 &copy; 2021-现在 辰雨轩 版权所有</span>
        </div>
    </div>
<!-- footer end -->
</body>
</html>